<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>情侣恋爱商城</title>
  <link rel="stylesheet" href="mifengmi.css">
</head>

<body>
  <nav class="navbar">
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="products.html">商城</a></li> <!-- 链接到商品界面 -->
      <li><a href="supply.html">供货</a></li> <!-- 链接到供货界面 -->
      <li><button id="changeBackgroundButton">更换背景</button></li>
      <li class="right"><a href="#">登录</a></li>
      <li class="right"><a href="register.html">注册</a></li>
      <li class="right"><button id="anniversaryButton">设置纪念日</button></li>
      <li class="right"><button id="settingsButton">相爱时间</button></li>
    </ul>
  </nav>
  <div class="content">
    <div class="left-panel">
      <div class="profile">
        <div class="profile-item">
          <img id="maleAvatar" src="images/add.png" alt="男生头像" class="avatar">
          <input type="file" id="maleAvatarInput" style="display: none;">
          <p id="maleBirthday" class="birthday" data-birthday="05.20">5月20日</p>
        </div>
        <div class="love-days-container">
          <h1>欢迎来到情侣恋爱商城</h1>
          <p id="loveDays">我们已经恋爱了 <span id="daysCount">520</span> 天</p>
        </div>
        <div class="profile-item">
          <img id="femaleAvatar" src="images/add.png" alt="女生头像" class="avatar">
          <input type="file" id="femaleAvatarInput" style="display: none;">
          <p id="femaleBirthday" class="birthday" data-birthday="05.20">5月20日</p>
        </div>
      </div>

      <!-- 纪念日列表 -->
      <div id="anniversaryContainer">
        <h2>纪念日</h2>
        <ul id="anniversaryList"></ul>
        <button id="addAnniversaryButton" class="add-button">+</button>
      </div>
    </div>
  </div>

  <!-- 相爱时间模态框 -->
  <div id="settingsModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div class="form-container">
        <h2>设置相爱日期</h2>
        <form id="loveForm">
          <label for="startDate">相爱日期:</label>
          <input type="date" id="startDate" name="startDate" required>
          <button type="submit">设置</button>
        </form>
      </div>
    </div>
  </div>

  <!-- 纪念日模态框 -->
  <div id="anniversaryModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div class="form-container">
        <h2>添加纪念日</h2>
        <form id="anniversaryForm">
          <label for="anniversaryDate">纪念日日期:</label>
          <input type="date" id="anniversaryDate" name="anniversaryDate" required>
          <label for="anniversaryName">纪念日名称:</label>
          <input type="text" id="anniversaryName" name="anniversaryName" required>
          <button type="submit">添加纪念日</button>
        </form>
      </div>
    </div>
  </div>

  <!-- 生日选择模态框 -->
  <div id="birthdayModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div class="form-container">
        <h2>选择生日</h2>
        <form id="birthdayForm">
          <label for="calendarType">选择日历类型:</label>
          <select id="calendarType" name="calendarType" required>
            <option value="solar">阳历</option>
            <option value="lunar">阴历</option>
          </select>
          <div id="solarBirthdayContainer">
            <label for="solarBirthday">阳历生日:</label>
            <input type="date" id="solarBirthday" name="solarBirthday">
          </div>
          <div id="lunarBirthdayContainer" style="display: none;">
            <label for="lunarBirthday">阴历生日:</label>
            <input type="text" id="lunarBirthday" name="lunarBirthday" placeholder="农历日期">
          </div>
          <button type="submit">确定</button>
        </form>
      </div>
    </div>
  </div>

  <!-- 更换背景文件输入 -->
  <input type="file" id="backgroundInput" style="display: none;">

  <script src="index.js"></script>
</body>

</html>